<template>
  <view class="container">
    <view class="page-container" :style="listHeightStylePage">
      <scroll-view :refresher-background="'transparent'" :scroll-top="scrollTop" :style="listHeightStyle"
        class="apply-menu todo-list-container" scroll-y="true" :refresher-enabled="true"
        :refresher-triggered="isRefreshing" @refresherrefresh="onRefresh" @scrolltolower="loadMore">
        <view v-for="(item, index) in todoItems" :key="index" class="list-item">
          <view class="list-li">
            <view class="todo-item">
              <view class="unread-dot" v-if="!item.is_read && showUnreadDot"></view>
              <view class="todo-title">
                <text>{{ item.subject }}</text>
              </view>
              <template v-if="!item.tag">
                <view class="todo-content">
                  <text>待办描述: {{ item.description }}</text>
                </view>
                <view class="todo-content">
                  <text>创建时间: {{ item.create_time }}</text>
                </view>


                <view v-if="parentParams.style !== 5">
                  <view class="todo-footer" v-if="item.isDone == 1" @click="TrouterPUsh(item)">
                    <text class="submit-btn">去查看</text>
                  </view>
                  <view class="todo-footer" v-else-if="item.isDone == 2" @click="TrouterPUsh(item)">
                    <text class="submit-btn">去处理</text>
                  </view>
                </view>

                <view v-else>
                  <view class="todo-footer" @click="TrouterPUsh(item)">
                    <text class="submit-btn">去查看</text>
                  </view>
                </view>
              </template>

              <template v-else>

                <view class="todo-content">
                  <view>申请人： {{ item.content }}</view>
                  <view>请假类型：{{ item.contentA }}</view>
                  <view>开始时间： {{ item.contentB }}</view>
                  <view>结束时间： {{ item.contentC }}</view>
                  <view>请假天数 {{ item.contentD }}</view>
                </view>

                <view class="special-actions">
                  <view class="action-btn reject">拒绝</view>
                  <view class="action-btn approve" @click="TrouterPUsh(item)">同意</view>
                </view>
              </template>
            </view>
          </view>
        </view>

        <!-- 加载中提示 -->
        <view v-if="loading" class="loading-text">
          加载中...
        </view>

        <!-- 没有数据提示（只在初次加载完成且无数据时显示） -->
        <view v-else-if="todoItems.length == 0 && !loading" class="no-more-text">
          真棒，待办都处理完啦！
        </view>

        <!-- 已加载全部数据提示（只在有数据且没有更多数据时显示） -->
        <view v-else-if="noMore && todoItems.length > 0" class="no-more-text">
          - 已展示全部待办 -
        </view>

      </scroll-view>
    </view>

    <!-- 新增待办按钮 -->
    <!--    <view class="fab" @click="handleAdd">-->
    <!--      <text class="fab-icon">+</text>-->
    <!--    </view>-->

    <!-- 新增待办详情 -->
    <up-popup :show="popupshow" mode="bottom" @close="close('1')">
      <view class="popup-container" style="z-index: 10;">
        <!-- 顶部 -->
        <view class="header-title">
          <view class="header-close"><up-icon name="close" @click="popupshowclose"></up-icon></view>
          <view class="header-text">新建待办</view>
          <view class="header-button">
            <up-button class="HeaderBut" text="新建" type="primary" size="mini" @click="close('2')"></up-button>
          </view>
        </view>


        <up-form :model="form" :rules="rules" ref="formRef">
          <!-- 描述信息 -->
          <view class="description-section">
            <view class="company-info">
              归属于 江苏绿港现代农业发展股份有限公司
            </view>
            <view class="input-group">
              <up-form-item prop="subject" label-width="0">
                <up-input v-model="form.subject" placeholder="待办标题" border="none"
                  :custom-style="{ padding: '10px 0', borderBottom: '1px solid #f0f0f0' }" clearable></up-input>
              </up-form-item>

              <up-form-item prop="description" label-width="0">
                <up-input v-model="form.description" placeholder="待办描述" border="none"
                  :custom-style="{ padding: '10px 0', borderBottom: '1px solid #f0f0f0' }" clearable></up-input>
              </up-form-item>
            </view>
          </view>

          <!-- 时间 -->
          <up-form-item prop="dueTime" label-width="0">
            <view class="time-section">
              <view class="section-icon">
                <up-icon name="calendar"></up-icon>
              </view>
              <view class="time-options" v-if="!form.dueTimeA" @click="shijianhandleAdd">
                <view class="time-option">选择时间</view>
              </view>
              <!-- 回显已选择的时间 -->
              <view class="selected-time" style="display: flex;" v-if="form.dueTimeA">
                <view @click="shijianhandleAdd">{{ form.dueTimeA }}</view>
                <view class="section-icon" style="margin-left: 8px;margin-top: 2px;">
                  <tui-icon name="notice"></tui-icon>
                </view>
                <view class="section-icon" style="margin-left: -8px;margin-top: 3px;" @click="delTime">
                  <tui-icon name="close"></tui-icon>
                </view>
              </view>
            </view>
          </up-form-item>

          <!--    附件 -->
          <up-form-item label-width="0">
            <view class="attachment-section">
              <view class="section-icon">
                <up-icon name="file-text"></up-icon>
              </view>
              <up-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="6" multiple :maxCount="1"
                width="250" height="150">
                <view class="attachment-text">添加附件</view>
              </up-upload>

            </view>
          </up-form-item>



          <!-- 执行人 -->
          <up-form-item label-width="0">
            <view class="people-section" style="width: 100%;">
              <view class="section-icon">
                <tui-icon name="people"></tui-icon>
              </view>
              <view class="section-content">
                <!-- 未选择时显示提示文字 -->
                <view @click="selectedClcick('执行人')" class="people-info"
                  v-if="!selectedPeople || selectedPeople.length === 0">
                  执行人
                </view>

                <!-- 已选择人员回显 -->
                <template v-else>
                  <!-- 显示前两个人员（带重叠头像效果）:class="{ 'multi-person': selectedPeople.length > 1 }" -->
                  <view v-for="(person, index) in selectedPeople.slice(0, 2)" :key="person.id" class="selected-people">
                    <image class="avatar" :src="person.avatar" />
                    <text @click="selectedClcick('执行人')" class="name">{{ person.name }}</text>
                    <view class="section-icon" style="margin-left: 10px;margin-top: 3px;" @click="delselectedPeople">
                      <tui-icon name="close"></tui-icon>
                    </view>
                  </view>

                  <!-- 显示更多人数提示 -->
                  <text @click="selectedClcick('执行人')" v-if="selectedPeople.length > 2" class="more-count">
                    {{ selectedPeople.length }} 等执行人
                    <view class="section-icon" style="margin-left: 10px;margin-top: 3px;" @click="delselectedPeople">
                      <tui-icon name="close"></tui-icon>
                    </view>
                  </text>

                </template>
              </view>
            </view>
          </up-form-item>
          <!-- 参与人 -->
          <up-form-item label-width="0">
            <view class="people-section" style="width: 100%;">
              <view class="section-icon">
                <tui-icon name="friendadd"></tui-icon>
              </view>
              <view class="section-content">
                <!-- 未选择时显示提示文字 -->
                <view class="people-info" @click="selectedClcick('参与人')"
                  v-if="!ParticipantsList || ParticipantsList.length === 0">
                  参与人
                </view>

                <!-- 已选择人员回显 -->
                <template v-else>
                  <!-- 显示前两个人员（带重叠头像效果）:class="{ 'multi-person': selectedPeople.length > 1 }" -->
                  <view v-for="(person, index) in ParticipantsList.slice(0, 2)" :key="person.id"
                    class="selected-people">
                    <image class="avatar" :src="person.avatar" />
                    <text class="name" @click="selectedClcick('参与人')">{{ person.name }}</text>
                    <view class="section-icon" style="margin-left: 10px;margin-top: 3px;" @click="delParticipantsList">
                      <tui-icon name="close"></tui-icon>
                    </view>
                  </view>

                  <!-- 显示更多人数提示 -->
                  <text @click="selectedClcick('参与人')" v-if="ParticipantsList.length > 2" class="more-count">
                    {{ ParticipantsList.length }} 等参与人
                    <view class="section-icon" style="margin-left: 10px;margin-top: 3px;" @click="delParticipantsList">
                      <tui-icon name="close"></tui-icon>
                    </view>
                  </text>
                </template>
              </view>
            </view>
          </up-form-item>
        </up-form>

      </view>
    </up-popup>
    <!-- 选择其他时间 -->
    <up-popup :show="shijianpopupshow" mode="bottom" @close="shijianpopupshowclose">
      <view class="popup-container">
        <!-- 顶部 -->
        <view class="header-title">
          <view class="header-close"><up-icon name="close" @click="handleCancelTimeSelect"></up-icon></view>
          <view class="header-text">设置截止时间</view>
          <view class="header-button">
            <up-button class="HeaderBut" text="确定" type="primary" size="mini"
              @click="shijianpopupshowclose"></up-button>
          </view>
        </view>

        <view>
          <calendar @date-change="datechange"></calendar>
        </view>

        <view class="footer-button">
          <up-cell-group>
            <up-cell title="截止时间" :value="CellDateTime" :isLink="true" @click="CellDate"></up-cell>
            <!-- <up-cell title="提醒时间" :value="groupgroupValue" :isLink="true" @click="CellGroipClick"></up-cell> -->
          </up-cell-group>
        </view>

        <tui-datetime ref="dateTime" :type="4" @confirm="datetimechange"></tui-datetime>
      </view>
    </up-popup>
    <!-- 设置提醒 -->
    <up-popup :show="SetreminderShow" mode="bottom" @close="Setreminderclose">
      <view class="popup-container">
        <!-- 顶部 -->
        <view class="header-title">
          <view class="header-close"><up-icon name="close" @click="Setreminderclose"></up-icon></view>
          <view class="header-text">设置提醒</view>
          <view class="header-button">
            <up-button class="HeaderBut" text="确定" type="primary" size="mini" @click="Setreminderclose"></up-button>
          </view>
        </view>


        <view>
          <up-radio-group v-model="groupgroupValue" placement="column" @change="groupgroupChange">
            <up-radio :customStyle="{ marginBottom: '8px' }" v-for="(item, index) in radiolist1" :key="index"
              :label="item.name" :name="item.name">
            </up-radio>
          </up-radio-group>
        </view>

        <view style="margin-top: 10px;margin-left: 3px;display: flex;height: 40px;line-height: 40px;">
          <view style="color: #ccc;font-size: 30px;">+</view>
          <view style="margin-left: 10px;color: #ccc;" @click="zDtIME">添加指定时间</view>
        </view>
        <tui-datetime ref="dateTimeSetreminder" :type="1" @confirm="zDtIMEchange"></tui-datetime>
      </view>
    </up-popup>

    <up-popup :customStyle="{ width: '100vw', overflowY: 'auto', height: 'auto' }" style="z-index: 999999;"
      :show="SelectpersonnelShow" mode="right" @close="closePopup">

      <up-navbar title="人员选择" :autoBack="false" placeholder @leftClick="closePopup"></up-navbar>

      <OrgPicker ref="mallList" :overlay="false" :type="'user'" :multiple="false" :entry="'component'" @ok="selected">
      </OrgPicker>


    </up-popup>


    <u-modal :show="modalShow" :showConfirmButton="false">
      <view class="slot-content">
        <rich-text nodes="加载数据,请稍后..."></rich-text>
      </view>
    </u-modal>
  </view>
</template>

<script>
import OrgPicker from "@/components/OrgPicker/index.vue";
import tuiDatetime from "@/components/thorui/tui-datetime/tui-datetime.vue";
import tuiIcon from "@/components/thorui/tui-icon/tui-icon.vue";
import tuiSwipeAction from "@/components/thorui/tui-swipe-action/tui-swipe-action.vue";
import { SetBackLogadd, getBackLogIndex } from "../../../apis/Mytodolist/Waitformetohandleit.js";
import calendar from './calendar.vue';
import { useUserStore } from "@/pinia-store/user.js";
import { mapStores } from 'pinia';
export default {
  name: 'Waitformetohandleit',
  components: {
    tuiSwipeAction,
    tuiIcon,
    calendar,
    tuiDatetime,
    OrgPicker,

  },
  data () {
    return {
      scrollTop: 0,
      modalShow: false,
      fileList: [], //附件列表
      todoItems: [],
      actions: [
        {
          name: '修改',
          color: '#fff',
          fontsize: 30,
          width: 70,
          background: '#5677fc'
        },
        {
          name: '删除',
          color: '#fff',
          fontsize: 30, //单位rpx
          width: 70, //单位px
          background: '#FD3B31'
        },

        {
          name: '收藏',
          width: 70,
          fontsize: 30,
          color: '#fff',
          background: '#C8C7CD'
        }
      ],
      radiolist1: [
        {
          name: '无',
          disabled: false
        },
        {
          name: '截止时',
          disabled: false
        },
        {
          name: '截止前15分钟',
          disabled: false
        }, {
          name: '截止前1小时',
          disabled: false
        },
        {
          name: '截止前3小时',
          disabled: false
        },
        {
          name: '截止前1天',
          disabled: false
        }
      ],
      popupshow: false, // 添加任务
      shijianpopupshow: false, // 截止时间
      SetreminderShow: false, // 提醒
      SelectpersonnelShow: false, // 选择人员
      value: '',
      CellDateTime: '请选择',
      groupgroupValue: '无',
      selectedTimeOption: '', // today / tomorrow / other
      selectedDate: '',
      formatted: '',
      tempSelectedDate: '', // 临时存储选择的日期
      tempCellDateTime: '18:00', // 临时存储选择的时间
      selectedTimeLabel: '', // 初始为空
      paramsForm: {
        keywords: "", //输入框
        page: 1, // 当前页码
        row: 10, // 每页10条数据
        style: 1, // tabs
        time: 1, // 倒序正序
        type: 0, //  分类
      },
      form: {
        subject: '',
        description: '',
        dueTime: '',
        executorIds: [],
      },
      rules: {
        subject: [
          { required: true, message: '请输入待办标题', trigger: 'blur' },
          { min: 2, max: 30, message: '长度在2到30个字符', trigger: 'blur' }
        ],

        description: [
          { required: true, message: '请输入待办描述', trigger: 'blur' },
          { max: 200, message: '描述不能超过200个字符', trigger: 'blur' }
        ],
        dueTime: [
          { required: true, message: '请选择截止时间', trigger: 'change' }
        ],
      },
      style: 0,
      openedTime: '', // 打开前的时间
      initialPickerValue: '',
      selectedPeople: [], // 执行人
      ParticipantsList: [],
      refreshing: false,     // 下拉刷新状态
      loading: false,        // 加载状态
      hasMore: true,         // 是否有更多数据
      page: 1,               // 当前页码
      pageSize: 10,          // 每页数量
      firstLoad: true,
      parentParams: {
        style: 1,
      },  // 新增：专门存储父组件参数
      debounceTimer: null,
      total: '',
      Personneljudgment: '执行人',
      noMore: false,
      isRefreshing: false,
      listHeight: 0, // 动态计算的高度
      listHeightStyle: {}, // 动态计算的样式
      topHeight: 0,
      listHeightStylePage: {},

    }
  },
  computed: {
    ...mapStores(useUserStore),
    showUnreadDot () {
      return this.parentParams.style === 1 || this.parentParams.style === 4 || this.parentParams.style === 5;
    }
  },
  props: {
    modalTitleGet: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    modalTitleGet: {
      handler (val) {
        if (val) {
          this.onRefresh()
          uni.removeStorageSync('modalTitleGet')
        }
      },
      deep: true,
      immediate: true
    }
  },
  created () {
    console.log('modalTitleGet', this.modalTitleGet)
    let app = uni.getSystemInfoSync();
    this.topHeight = app.statusBarHeight;

    this.onRefresh()
    this.calculateListHeight()
  },
  methods: {
    onRefresh () {
      this.isRefreshing = true; // 开始刷新
      this.todoItems = [];
      this.page = 1;
      this.paramsForm.page = 1;
      this.noMore = false;
      this.GgetBackLogIndex();
    },
    calculateListHeight () {
      const windowHeight = window.innerHeight; // 视口高度
      const topHeight = this.topHeight || 0; // 顶部安全高度
      const navbarHeight = 80 // 导航栏高度（假设为 44px）
      const tabsHeight = 0;
      // #ifdef APP-PLUS
      this.listHeightStyle = {
        overflowY: 'hidden',
        height: `90vh`,
        marginTop: `170rpx`,
      };

      this.listHeightStylePage = {
        height: `91vh`,
      };
      // #endif

      // #ifdef H5
      const listHeight = windowHeight - topHeight - navbarHeight - tabsHeight;
      this.listHeightStyle = {
        height: `${listHeight}px`,
        overflowY: 'hidden',
        marginTop: `170rpx`,
      };

      this.listHeightStylePage = {
        height: `${windowHeight - 45}px`,
      };
      // #endif
    },

    async Fathersonoperation (isRefresh = false, params = {}) {
      this.scrollTop = 0;

      // 延迟触发一次，确保绑定生效（某些系统需要）
      this.$nextTick(() => {
        this.scrollTop = 1;
        this.$nextTick(() => {
          this.scrollTop = 0;
        });
      });

      await this.GgetBackLogIndex(isRefresh, params)
    },
    async GgetBackLogIndex (isRefresh = false, params = {}) {
      if (isRefresh) {
        this.todoItems = []
        this.page = 1;
        this.paramsForm.page = 1;
        this.noMore = false;
        this.loading = false
      }
      uni.showLoading({
        title: '加载中'
      });
      // 持久化父组件参数
      if (Object.keys(params).length > 0) {
        this.parentParams = params;
      }
      // 防止重复请求
      if (this.loading) return;
      try {
        this.loading = true;
        // 合并请求参数
        const requestParams = {
          ...this.paramsForm,
          ...this.parentParams,
          page: this.page,
          pageSize: this.pageSize
        };

        const res = await getBackLogIndex({
          ...requestParams,
          token: this.userStore.user.token
        });

        if (res.status > 0) {
          this.$emit('setToDoInformation', res)
          this.todoItems = this.page === 1 ? res.data : [...this.todoItems, ...res.data];
          this.total = res.total;
          if (this.todoItems.length >= this.total) {
            this.noMore = true;
          }
          this.isRefreshing = false;
          this.loading = false;

        } else {
          uni.showToast({
            title: '获取失败，请稍后重试',
            icon: 'error',
          })
          this.loading = false;
          this.noMore = true;
          this.isRefreshing = false;
          this.todoItems = []
        }

        uni.hideLoading();

      } catch (error) {
        this.todoItems = []
        uni.hideLoading();
        uni.showToast({
          title: '获取失败，请稍后重试',
          icon: 'error',
        })
        // 可以在这里添加错误处理逻辑
      } finally {
        this.modalShow = false
        this.loading = false;
        if (this.refreshing) {
          this.refreshing = false;
        }
      }
    },
    // 去处理
    TrouterPUsh (item) {
      if (item.type == 1 || item.type == 7) {
        uni.navigateTo({
          url: '/pages/apply/oaList/applyOrderDetail?id=' + item.link_id
        });
      }
      item.is_read = 1
      // uni.navigateTo({
      //   url: "/components/ToDoComponent/form/index",
      //   animationType: 'none',
      //   success: () => {
      //     // 确保页面加载完成后再触发事件
      //     setTimeout(() => {
      //       eventBus.$emit('todo-item-data', item);
      //     }, 100);
      //   }
      // });
    },
    handleAdd () {
      this.selectedPeople = []
      this.ParticipantsList = []
      this.form = {
        subject: '',
        description: '',
        dueTime: '',
        executorIds: [],
      }
      this.popupshow = !this.popupshow
    },
    CellGroipClick () {
      this.SetreminderShow = !this.SetreminderShow
    },
    loadMore () {
      if (this.loading || this.noMore) return;
      this.page++;
      this.GgetBackLogIndex();
    },
    popupshowclose () {
      this.selectedPeople = []
      this.ParticipantsList = []
      this.form = {
        subject: '',
        description: '',
        dueTime: '',
        executorIds: [],
      }
      this.popupshow = false
    },
    close (value) {
      if (value == '1') {
        this.popupshow = false
        this.popupshowclose()
        return
      }
      this.$refs.formRef.validate().then(res => {
        delete this.form.dueTimeA
        // 验证通过，执行提交
        SetBackLogadd({
          ...this.form,
          'participantIds': '',
          'file': '',
          'executorIds': '',
          token: this.userStore.user.token
        }).then(res => {
          if (res.status == 1) {
            this.popupshow = false
            this.$refs.uToastRef.show({
              type: 'success',
              icon: false,
              title: '提交成功',
              message: '提交成功',
            });
            this.GgetBackLogIndex(this.paramsForm)
          }

        }).catch(err => {
          this.$refs.uToastRef.show({
            type: 'error',
            icon: false,
            title: '提交失败',
            message: '提交失败',
          });

        }).finally(() => {

        })
      }).catch(errors => {
        // uni.$u.toast('校验失败')
      })
    },
    // 取消选择时间
    handleCancelTimeSelect () {
      this.shijianpopupshow = false;
      // 不更新 selectedTimeLabel
    },
    shijianpopupshowclose () {
      if (this.tempSelectedDate) {
        this.form.dueTimeA = `${this.tempSelectedDate}  ${this.tempCellDateTime == '请选择' ? '' : this.CellDateTime}  截止`;
        this.form.dueTime = `${this.tempSelectedDate} ${this.tempCellDateTime == '请选择' ? '' : this.CellDateTime}`;
        this.CellDateTime = this.tempCellDateTime;
      }
      this.shijianpopupshow = false;
    },

    Setreminderclose () {
      this.SetreminderShow = false
    },
    groupChange (n) {
      console.log('groupChange:', n);
    },
    handlerButton (e) {
      let index = e.index;
      let item = e.item;
      let menuTxt = ['删除', '修改', '收藏'][index];
      console.log('您点击了【' + menuTxt + '】按钮')
    },
    datechange (val) {
      const date = val ? new Date(val) : new Date();
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      this.tempSelectedDate = `${month}月${day}日`;

    },
    getNowTime () {
      const now = new Date();
      const h = String(now.getHours()).padStart(2, '0');
      const m = String(now.getMinutes()).padStart(2, '0');
      return `${h}:${m}`;
    },
    CellDate () {
      this.$refs.dateTime && this.$refs.dateTime.show();
      this.openedTime = this.getNowTime();
      this.initialPickerValue = this.CellDateTime == '请选择' ? '01:00' : this.CellDateTime;
    },
    datetimechange (e) {
      const selectedTime = e.result;
      if (selectedTime === this.initialPickerValue) {
        // 没动过，使用打开时间
        this.tempCellDateTime = this.openedTime;
        this.CellDateTime = this.openedTime;
      } else {
        // 改过，直接用用户选的
        this.tempCellDateTime = selectedTime;
        this.CellDateTime = selectedTime;
      }
    },
    // 提醒
    groupgroupChange (n) {
      this.groupgroupValue = n
    },
    // 打开指定时间
    zDtIME () {
      this.$refs.dateTimeSetreminder && this.$refs.dateTimeSetreminder.show();
    },
    // 添加指定时间
    zDtIMEchange (e) {
      console.log('EEE', e);
      // this.CellDateTime = e.result
    },
    selectToday () {
      const today = new Date();
      const year = today.getFullYear();
      const month = today.getMonth() + 1;
      const day = today.getDate();
      this.selectedDate = `${month}月${day}日`;
      this.form.dueTime = '今天 18:00 截止';
      this.tempSelectedDate = `${month}月${day}日`;
    },

    selectTomorrow () {
      this.selectedTimeOption = 'tomorrow';
      this.form.dueTime = '明天 18:00 截止';
    },

    shijianhandleAdd () {
      this.shijianpopupshow = true;
      // 重置临时变量，但不影响已选时间
      this.tempSelectedDate = this.form.dueTime ?
        this.form.dueTime.split('  ')[0] : '';
      this.tempCellDateTime = this.CellDateTime;
    },
    delTime () {
      this.form.dueTime = null
      this.form.dueTimeA = null;
      this.tempSelectedDate = null;
    },
    // 上传
    // 删除图片
    deletePic (event) {
      const { index } = event;
      this.fileList.splice(index, 1);
    },
    // 新增图片
    async afterRead (event) {
      const { file } = event;
      // Handle both images and files
      this.fileList = file.map(item => ({
        ...item,
        status: 'uploading',
        message: '上传中'
      }));

      // Here you would typically upload to your server
      // After upload success:
      this.fileList = this.fileList.map(item => ({
        ...item,
        status: 'success',
        message: '上传成功'
      }));
    },
    uploadFilePromise (url) {
      console.log(url);
    },
    // 选择人员
    selectedClcick (value) {
      this.Personneljudgment = value
      this.SelectpersonnelShow = true;
    },
    // 选择的人员信息
    selected (user) {
      console.log('user', user);
      if (this.Personneljudgment == '执行人') {
        this.selectedPeople.push(...user)
      } else {
        this.ParticipantsList.push(...user)
      }

      this.SelectpersonnelShow = false;
    },
    closePopup () {
      this.SelectpersonnelShow = false;
      this.$refs.mallList.selection = [];
    },
    delselectedPeople () {
      this.selectedPeople = []
    },
    delParticipantsList () {
      this.ParticipantsList = []
    }
  }
}
</script>

<style lang="scss" scoped>
.apply-menu {
  background-color: #f2f2f2;
  overflow-y: auto;

  .list-item {
    border-radius: 20rpx;
    margin-bottom: 20rpx;
    background-color: #fff;


    .list-li {
      margin-left: 30rpx;
      padding-top: 20rpx;
      padding-bottom: 10rpx;
      position: relative;

      .todo-item {
        position: relative;
      }
    }
  }


  .todo-footer {
    margin-right: 28rpx;
    text-align: center;
    border: 1px solid #409eff;
    height: 30px;
    line-height: 30px;
    border-radius: 6px;
    margin-top: 10px;
    margin-bottom: 10rpx;

    .submit-btn {
      color: #409eff;
    }
  }

  .loading-text,
  .no-more-text {
    margin-top: 20rpx;
    text-align: center;
    padding: 20rpx;
    color: #999;
    font-size: 28rpx;
  }

}

.page-container {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* 禁止页面滚动 */
}



.load-more,
.no-more {
  text-align: center;
  padding: 15px;
  color: #999;
  font-size: 14px;
}

.container {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.unread-dot {
  position: absolute;
  left: -16rpx;
  top: -10rpx;
  width: 5px;
  height: 5px;
  background-color: #f56c6c;
  border-radius: 50%;
  z-index: 1;
}

.todo-list-container {
  //height: 85.1vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  padding: 10px;
  box-sizing: border-box;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  will-change: transform;
}

.no-data-message,
.no-more-message {
  font-size: 15px;
  color: #969799;
  margin: 10px 0;
}

.fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 56px;
  height: 56px;
  background-color: #409eff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  z-index: 100;

  .fab-icon {
    color: white;
    font-size: 24px;
  }
}

.popup-container {
  height: 70vh;
  padding: 16px 20px;
  background: #fff;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
}

.popupSetreminder {
  width: 90vw;
  height: 100vh;
  padding: 16px 20px;
  background: #fff;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
}

.header-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  margin-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;

  .header-close {
    width: 33%;

    .up-icon {
      font-size: 20px;
      color: #999;
    }
  }

  .header-text {
    width: 40%;
    text-align: center;
    font-size: 17px;
    // font-weight: 500;
    color: #333;
  }

  .header-button {
    width: 33%;
    text-align: right;

    .HeaderBut {
      width: 60px;
      height: 28px;
      line-height: 28px;
      position: relative;
      right: -20px;
    }

  }
}

.description-section {
  margin-top: 16px;

  .company-info {
    font-size: 13px;
    color: #888;
    margin-bottom: 12px;
  }

  .input-group {
    .todo-input {
      width: 100%;
      padding: 10px 0;
      border-bottom: 1px solid #f0f0f0;
      font-size: 15px;
      color: #333;
      margin-bottom: 8px;

      &:focus {
        border-bottom-color: #409eff;
      }
    }

    .placeholder-style {
      color: #c0c4cc;
      font-size: 15px;
    }
  }
}


.people-section {

  /* 原有样式保持不变 */
  .section-content {
    flex: 1;
    display: flex;
    align-items: center;
    min-height: 44px;
    overflow-x: auto;
    /* 允许横向滚动 */
    white-space: nowrap;
    /* 禁止换行 */

    .people-info {
      font-size: 15px;
      color: #333;
      line-height: 1.4;
      padding-left: 10px;
      flex-shrink: 0;
      white-space: nowrap;
    }

    .selected-people {
      display: inline-flex;
      /* 改为行内flex */
      align-items: center;
      margin-right: 8px;
      background: #f7f7f7;
      border-radius: 15px;
      padding: 4px 8px 4px 4px;
      max-width: 120px;
      flex-shrink: 0;
      /* 禁止压缩 */

      .avatar {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        margin-right: 6px;
        border: 1px solid #fff;
        box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
        object-fit: cover;
      }

      .name {
        font-size: 13px;
        color: #333;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      &.multi-person {
        .avatar {
          margin-right: 0;
          margin-left: -8px;
          position: relative;
          z-index: 1;
        }
      }
    }

    .more-count {
      display: inline-flex;
      align-items: center;
      margin-left: 4px;
      font-size: 13px;
      color: #666;
    }
  }
}


.people-section,
.time-section,
.attachment-section {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f5f5f5;

  .section-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: 12px;

    .up-icon,
    .tui-icon {
      font-size: 18px !important;
      color: #666;
    }
  }

  .section-content {
    flex: 1;

    .people-info {
      font-size: 15px;
      color: #333;
      line-height: 1.4;
      border-radius: 10px;
      padding-left: 10px;
    }

    .radio-option {
      margin-top: 2px;

      .up-radio {
        font-size: 13px;
        color: #666;
      }
    }
  }
}



.time-section {
  width: 100%;

  .time-options {
    display: flex;
    gap: 8px;

    .time-option {
      padding: 0 12px;
      height: 32px;
      line-height: 32px;
      border: 1px solid #e0e0e0;
      border-radius: 6px;
      font-size: 13px;
      color: #555;
      background: #fafafa;

      &:active {
        background: #f0f0f0;
      }

      &:last-child {
        padding: 0 14px;
      }
    }
  }
}

.attachment-section {
  width: 100%;

  .attachment-text {
    font-size: 14px;
    color: #888;
  }
}

.selected-time {
  color: #333;
  font-size: 14px;
  background: #e5e5e5;
  border-radius: 10px;
  padding-left: 10px;
  height: 25px;
  line-height: 25px;
}


.footer-message {
  text-align: center;
  padding: 10px;

}
</style>
